<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <p>
      <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation {{count}}</a>
    </p>
    <!-- 获取数据 -->
    <h4>{{count}}</h4>
    <h4>{{hello}}</h4>
    <!-- 获取对象属性 -->
    <h4>username:{{user.name}} password:{{user.pwd}}</h4>
    <br>
    <!-- 遍历数组 -->
    <ul>
      <li v-for="(i,index) in list" :key="index" :class="{'red':index==0,'blue':index==1}">
        {{i.cate}}
        <br>
        <ol>
          <li v-for="(news,index) in i.item" :key="index">{{news}}</li>
        </ol>
      </li>
    </ul>
    <!-- 绑定属性 -->
    <img :src="image">
    <br>
    <!-- 绑定html -->
    <div v-html="h"></div>
    <!-- 绑定class样式 和 click 事件 -->
    <button :class="{'red':flag,'blue':!flag}" v-on:click="add()">add</button>
    <!-- 动态绑定样式表 -->
    <div class="box" :style="{'width':box}">i am div</div>
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  props: {
    msg: String
  },
  data() {
    return {
      count: 0,
      hello: "hello",
      image: "http://test.cmias.castim.cn/favicon.ico",
      h: "<h2>h2 is ok</h2>",
      user: {
        name: "brucejiao",
        pwd: 123456
      },
      box: 100 + "px",
      flag: false,
      list: [
        {
          cate: "国内新闻",
          item: [{ title: "111" }, { title: "222" }]
        },
        {
          cate: "国际新闻",
          item: [{ title: "111" }, { title: "222" }]
        }
      ]
    };
  },
  methods: {
    add() {
      this.count++;
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #4cc912;
}

button {
  width: 100px;
  height: 40px;
}

.countdiv {
  width: 100px;
  height: 40px;
}

.red {
  color: red;
}
.blue {
  color: blue;
}
.box {
  width: 100px;
  height: 60px;
  align-content: center;
  background: #4cc912;
}
</style>
